<div bsModal #actionModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="actionModal"
    aria-hidden="true" [config]="{backdrop: 'static'}">
    <div class="modal-dialog modal-xxl">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">
                    {{ title }}管理
                </h4>
                <button type="button" class="close" (click)="close()" [attr.aria-label]="l('Close')">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <div class="modal-body">

                <div class="primeng-datatable-container" [busyIf]="primengTableHelper.isLoading">
                    <tabset class="tab-container tabbable-line">
                        <tab heading="批量管理" (select)="tabSelect(1)" customClass="m-tabs__item">
                            <p-table #carDataTable [value]="carGeneralTools" [(selection)]="selectCarGeneralTools"
                                [paginator]="false" [lazy]="true" [scrollable]="true" ScrollWidth="100%"
                                [responsive]="primengTableHelper.isResponsive"
                                [resizableColumns]="primengTableHelper.resizableColumns">
                                <ng-template pTemplate="header">
                                    <tr>
                                        <th style="width: 38px">
                                            <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
                                        </th>
                                        <th style="width: 150px" pSortableColumn="title">
                                            名称
                                            <p-sortIcon field="title"></p-sortIcon>
                                        </th>
                                        <th style="width: 150px" pSortableColumn="brand">
                                            品牌
                                            <p-sortIcon field="brand"></p-sortIcon>
                                        </th>
                                        <th style="width: 150px" pSortableColumn="model">
                                            型号
                                            <p-sortIcon field="model"></p-sortIcon>
                                        </th>
                                        <th style="width: 150px" pSortableColumn="spec">
                                            规格
                                            <p-sortIcon field="spec"></p-sortIcon>
                                        </th>
                                        <th style="width: 150px" pSortableColumn="serialNo">
                                            出厂编号
                                            <p-sortIcon field="serialNo"></p-sortIcon>
                                        </th>
                                        <th style="width: 150px" pSortableColumn="unitPrice">
                                            单价
                                            <p-sortIcon field="unitPrice"></p-sortIcon>
                                        </th>
                                        <th style="width: 150px" pSortableColumn="location">
                                            位置
                                            <p-sortIcon field="location"></p-sortIcon>
                                        </th>
                                        <th style="width: 150px" pSortableColumn="intoStockDate">
                                            入库日期
                                            <p-sortIcon field="intoStockDate"></p-sortIcon>
                                        </th>
                                        <th style="width: 150px" pSortableColumn="category">
                                            类别
                                            <p-sortIcon field="category"></p-sortIcon>
                                        </th>
                                        <th style="width: 150px">
                                            工具类型
                                        </th>
                                        <th style="width: 150px">
                                            计量单位
                                        </th>
                                        <th style="width: 150px" pSortableColumn="isNeedVerification">
                                            是否需要鉴定周期
                                            <p-sortIcon field="isNeedVerification"></p-sortIcon>
                                        </th>
                                        <th style="width: 150px" pSortableColumn="verificationDate">
                                            鉴定日期
                                            <p-sortIcon field="verificationDate"></p-sortIcon>
                                        </th>
                                        <th style="width: 150px" pSortableColumn="nextVerificationDate">
                                            鉴定有效期
                                            <p-sortIcon field="nextVerificationDate"></p-sortIcon>
                                        </th>
                                        <th style="width: 150px" pSortableColumn="maxLoad">
                                            最大载荷
                                            <p-sortIcon field="maxLoad"></p-sortIcon>
                                        </th>
                                        <th style="width: 150px">
                                            制造厂商
                                        </th>
                                        <th style="width: 200px">
                                            备注
                                        </th>
                                        <th style="width: 200px">
                                            备注1
                                        </th>
                                    </tr>
                                </ng-template>
                                <ng-template pTemplate="body" let-record="$implicit">
                                    <tr>
                                        <td style="width: 38px">
                                            <p-tableCheckbox [value]="record"></p-tableCheckbox>
                                        </td>
                                        <td style="width: 150px">
                                            <span class="ui-column-title"> 名称</span>
                                            {{ record.title }}
                                        </td>
                                        <td style="width: 150px">
                                            <span class="ui-column-title"> 品牌</span>
                                            {{record.brand}}
                                        </td>
                                        <td style="width: 150px">
                                            <span class="ui-column-title"> 型号</span>
                                            {{record.model}}
                                        </td>
                                        <td style="width: 150px">
                                            <span class="ui-column-title"> 规格</span>
                                            {{record.spec}}
                                        </td>
                                        <td style="width: 150px">
                                            <span class="ui-column-title"> 出厂编号</span>
                                            {{record.serialNo}}
                                        </td>

                                        <td style="width: 150px">
                                            <span class="ui-column-title"> 单价</span>
                                            {{record.unitPrice}}
                                        </td>
                                        <td style="width: 150px">
                                            <span class="ui-column-title"> 位置</span>
                                            {{record.location}}
                                        </td>
                                        <td style="width: 150px">
                                            <span class="ui-column-title"> 入库日期</span>
                                            {{record.intoStockDate | momentFormat:'YYYY-MM-DD'}}
                                        </td>
                                        <td style="width: 150px">
                                            <span class="ui-column-title"> 类别</span>
                                            {{record.categoryName}}
                                        </td>
                                        <td style="width: 150px">
                                            <span class="ui-column-title"> 工具类型</span>
                                            {{record.classificationName}}
                                        </td>
                                        <td style="width: 150px">
                                            <span class="ui-column-title"> 计量单位</span>
                                            {{record.unit}}
                                        </td>
                                        <td style="width: 150px">
                                            <span class="ui-column-title"> 需周期鉴定</span>
                                            {{record.isNeedVerification}}
                                        </td>
                                        <td style="width: 150px">
                                            <span class="ui-column-title"> 鉴定日期</span>
                                            {{record.verificationDate | momentFormat:'YYYY-MM-DD'}}
                                        </td>
                                        <td style="width: 150px">
                                            <span class="ui-column-title"> 鉴定有效期</span>
                                            {{record.nextVerificationDate | momentFormat:'YYYY-MM-DD'}}
                                        </td>
                                        <td style="width: 150px">
                                            <span class="ui-column-title"> 最大载荷</span>
                                            {{record.maxLoad}}
                                        </td>
                                        <td style="width: 150px">
                                            <span class="ui-column-title"> 制造厂商</span>
                                            {{record.manufacturer}}
                                        </td>
                                        <td style="width: 200px">
                                            <span class="ui-column-title"> 备注</span>
                                            {{ record.remark}}
                                        </td>

                                        <td style="width: 200px">
                                            <span class="ui-column-title"> 备注1</span>
                                            {{ record.remark1}}
                                        </td>
                                    </tr>
                                </ng-template>
                            </p-table>

                            <div class="row" style="margin-top: 40px;">
                                <div class="col-6">
                                    <div class="form-group">
                                        <label for="outStockInfo">{{ title }}信息</label>
                                        <input id="outStockInfo" type="text" name="outStockInfo" class="form-control"
                                            [(ngModel)]="outStockInfo">
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="form-group">
                                        <label for="outRemark">{{ title }}备注</label>
                                        <input id="outRemark" type="text" name="outRemark" class="form-control"
                                            [(ngModel)]="outRemark">
                                    </div>
                                </div>
                            </div>

                            <div style="text-align: right;">
                                <button type="button" (click)="outStocks()" class="btn btn-primary"
                                    [disabled]="!selectCarGeneralTools.length" [buttonBusy]="saving"
                                    [busyText]="title + '中...'"><i class="fa fa-save"></i>
                                    <span>{{ title }}</span></button>
                            </div>

                        </tab>
                        <tab heading="入库管理" (select)="tabSelect(2)" customClass="m-tabs__item">
                            <p-table #outDataTable (onLazyLoad)="getOutGeneralTools($event)" [value]="outGeneralTools"
                                [(selection)]="selectOutGeneralTools"
                                rows="{{primengTableHelper.defaultRecordsCountPerPage}}" [paginator]="false"
                                [lazy]="true" [scrollable]="true" ScrollWidth="100%"
                                [responsive]="primengTableHelper.isResponsive"
                                [resizableColumns]="primengTableHelper.resizableColumns">
                                <ng-template pTemplate="header">
                                    <tr>
                                        <th style="width: 38px">
                                            <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
                                        </th>
                                        <th style="width: 150px" pSortableColumn="title">
                                            名称
                                            <p-sortIcon field="title"></p-sortIcon>
                                        </th>
                                        <th style="width: 150px" pSortableColumn="brand">
                                            品牌
                                            <p-sortIcon field="brand"></p-sortIcon>
                                        </th>
                                        <th style="width: 150px" pSortableColumn="model">
                                            型号
                                            <p-sortIcon field="model"></p-sortIcon>
                                        </th>
                                        <th style="width: 150px" pSortableColumn="spec">
                                            规格
                                            <p-sortIcon field="spec"></p-sortIcon>
                                        </th>
                                        <th style="width: 150px" pSortableColumn="serialNo">
                                            出厂编号
                                            <p-sortIcon field="serialNo"></p-sortIcon>
                                        </th>
                                        <th style="width: 150px" pSortableColumn="unitPrice">
                                            单价
                                            <p-sortIcon field="unitPrice"></p-sortIcon>
                                        </th>
                                        <th style="width: 150px" pSortableColumn="location">
                                            位置
                                            <p-sortIcon field="location"></p-sortIcon>
                                        </th>
                                        <th style="width: 150px" pSortableColumn="intoStockDate">
                                            入库日期
                                            <p-sortIcon field="intoStockDate"></p-sortIcon>
                                        </th>
                                        <th style="width: 150px" pSortableColumn="category">
                                            类别
                                            <p-sortIcon field="category"></p-sortIcon>
                                        </th>
                                        <th style="width: 150px">
                                            工具类型
                                        </th>
                                        <th style="width: 150px">
                                            计量单位
                                        </th>
                                        <th style="width: 150px" pSortableColumn="isNeedVerification">
                                            是否需要鉴定周期
                                            <p-sortIcon field="isNeedVerification"></p-sortIcon>
                                        </th>
                                        <th style="width: 150px" pSortableColumn="verificationDate">
                                            鉴定日期
                                            <p-sortIcon field="verificationDate"></p-sortIcon>
                                        </th>
                                        <th style="width: 150px" pSortableColumn="nextVerificationDate">
                                            鉴定有效期
                                            <p-sortIcon field="nextVerificationDate"></p-sortIcon>
                                        </th>
                                        <th style="width: 150px" pSortableColumn="maxLoad">
                                            最大载荷
                                            <p-sortIcon field="maxLoad"></p-sortIcon>
                                        </th>
                                        <th style="width: 150px">
                                            制造厂商
                                        </th>
                                        <th style="width: 200px">
                                            备注
                                        </th>
                                        <th style="width: 200px">
                                            备注1
                                        </th>
                                    </tr>
                                </ng-template>
                                <ng-template pTemplate="body" let-record="$implicit">
                                    <tr>
                                        <td style="width: 38px">
                                            <p-tableCheckbox [value]="record"></p-tableCheckbox>
                                        </td>
                                        <td style="width: 150px">
                                            <span class="ui-column-title"> 名称</span>
                                            {{ record.title }}
                                        </td>
                                        <td style="width: 150px">
                                            <span class="ui-column-title"> 品牌</span>
                                            {{record.brand}}
                                        </td>
                                        <td style="width: 150px">
                                            <span class="ui-column-title"> 型号</span>
                                            {{record.model}}
                                        </td>
                                        <td style="width: 150px">
                                            <span class="ui-column-title"> 规格</span>
                                            {{record.spec}}
                                        </td>
                                        <td style="width: 150px">
                                            <span class="ui-column-title"> 出厂编号</span>
                                            {{record.serialNo}}
                                        </td>

                                        <td style="width: 150px">
                                            <span class="ui-column-title"> 单价</span>
                                            {{record.unitPrice}}
                                        </td>
                                        <td style="width: 150px">
                                            <span class="ui-column-title"> 位置</span>
                                            {{record.location}}
                                        </td>
                                        <td style="width: 150px">
                                            <span class="ui-column-title"> 入库日期</span>
                                            {{record.intoStockDate | momentFormat:'YYYY-MM-DD'}}
                                        </td>
                                        <td style="width: 150px">
                                            <span class="ui-column-title"> 类别</span>
                                            {{record.categoryName}}
                                        </td>
                                        <td style="width: 150px">
                                            <span class="ui-column-title"> 工具类型</span>
                                            {{record.classificationName}}
                                        </td>
                                        <td style="width: 150px">
                                            <span class="ui-column-title"> 计量单位</span>
                                            {{record.unit}}
                                        </td>
                                        <td style="width: 150px">
                                            <span class="ui-column-title"> 需周期鉴定</span>
                                            {{record.isNeedVerification}}
                                        </td>
                                        <td style="width: 150px">
                                            <span class="ui-column-title"> 鉴定日期</span>
                                            {{record.verificationDate | momentFormat:'YYYY-MM-DD'}}
                                        </td>
                                        <td style="width: 150px">
                                            <span class="ui-column-title"> 鉴定有效期</span>
                                            {{record.nextVerificationDate | momentFormat:'YYYY-MM-DD'}}
                                        </td>
                                        <td style="width: 150px">
                                            <span class="ui-column-title"> 最大载荷</span>
                                            {{record.maxLoad}}
                                        </td>
                                        <td style="width: 150px">
                                            <span class="ui-column-title"> 制造厂商</span>
                                            {{record.manufacturer}}
                                        </td>
                                        <td style="width: 200px">
                                            <span class="ui-column-title"> 备注</span>
                                            {{ record.remark}}
                                        </td>

                                        <td style="width: 200px">
                                            <span class="ui-column-title"> 备注1</span>
                                            {{ record.remark1}}
                                        </td>
                                    </tr>
                                </ng-template>
                            </p-table>
                            <div class="primeng-no-data" *ngIf="primengTableHelper.totalRecordsCount == 0">
                                {{l('NoData')}}
                            </div>
                            <div class="primeng-paging-container">
                                <p-paginator rows="{{primengTableHelper.defaultRecordsCountPerPage}}" #outPaginator
                                    (onPageChange)="getOutGeneralTools($event)"
                                    [totalRecords]="primengTableHelper.totalRecordsCount"
                                    [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage">
                                </p-paginator>
                                <span class="total-records-count">
                                    共计：{{primengTableHelper.totalRecordsCount}}
                                </span>
                            </div>

                            <div class="row" style="margin-top: 40px;">
                                <div class="col-6">
                                    <div class="form-group">
                                        <label for="backStockInfo">入库信息</label>
                                        <input id="backStockInfo" type="text" name="backStockInfo" class="form-control"
                                            [(ngModel)]="backStockInfo">
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="form-group">
                                        <label for="backRemark">入库备注</label>
                                        <input id="backRemark" type="text" name="backRemark" class="form-control"
                                            [(ngModel)]="backRemark">
                                    </div>
                                </div>
                            </div>

                            <div style="text-align: right;">
                                <button type="button" (click)="backStocks()" class="btn btn-primary"
                                    [disabled]="!selectOutGeneralTools.length" [buttonBusy]="saving"
                                    [busyText]="'入库中...'"><i class="fa fa-save"></i> <span> 入库 </span></button>
                            </div>
                        </tab>
                        <tab heading="日志管理" (select)="tabSelect(3)" customClass="m-tabs__item">
                            <p-table #logDataTable (onLazyLoad)="getGeneralToolLogs($event)" [value]="generalToolLogs"
                                rows="{{primengTableHelper.defaultRecordsCountPerPage}}" [paginator]="false"
                                [lazy]="true" [scrollable]="true" ScrollWidth="100%"
                                [responsive]="primengTableHelper.isResponsive"
                                [resizableColumns]="primengTableHelper.resizableColumns">
                                <ng-template pTemplate="header">
                                    <tr>
                                        <th style="width: 150px">
                                            操作类型
                                        </th>
                                        <th style="width: 150px">
                                            出库信息
                                        </th>
                                        <th style="width: 150px" pSortableColumn="outDate">
                                            出库时间
                                            <p-sortIcon field="outDate"></p-sortIcon>
                                        </th>
                                        <th style="width: 200px">
                                            出库备注
                                        </th>
                                        <th style="width: 150px">
                                            入库信息
                                        </th>
                                        <th style="width: 150px" pSortableColumn="backDate">
                                            入库时间
                                            <p-sortIcon field="backDate"></p-sortIcon>
                                        </th>
                                        <th style="width: 200px">
                                            入库备注
                                        </th>
                                    </tr>
                                </ng-template>
                                <ng-template pTemplate="body" let-record="$implicit">
                                    <tr>
                                        <td style="width: 150px">
                                            <span class="ui-column-title"> 操作类型</span>
                                            {{record.operationName}}
                                        </td>
                                        <td style="width: 150px">
                                            <span class="ui-column-title"> 出库信息</span>
                                            {{record.outStockInfo}}
                                        </td>
                                        <td style="width: 150px">
                                            <span class="ui-column-title"> 出库时间</span>
                                            {{record.outDate | momentFormat:'YYYY-MM-DD'}}
                                        </td>
                                        <td style="width: 200px">
                                            <span class="ui-column-title"> 出库备注</span>
                                            {{record.outRemark}}
                                        </td>
                                        <td style="width: 150px">
                                            <span class="ui-column-title"> 入库信息</span>
                                            {{record.backStockInfo}}
                                        </td>
                                        <td style="width: 150px">
                                            <span class="ui-column-title"> 入库时间</span>
                                            {{record.backDate | momentFormat:'YYYY-MM-DD'}}
                                        </td>
                                        <td style="width: 200px">
                                            <span class="ui-column-title"> 入库备注</span>
                                            {{record.backRemark}}
                                        </td>

                                    </tr>
                                </ng-template>
                            </p-table>
                            <div class="primeng-no-data" *ngIf="primengTableHelper.totalRecordsCount == 0">
                                {{l('NoData')}}
                            </div>
                            <div class="primeng-paging-container">
                                <p-paginator rows="{{primengTableHelper.defaultRecordsCountPerPage}}" #logPaginator
                                    (onPageChange)="getGeneralToolLogs($event)"
                                    [totalRecords]="primengTableHelper.totalRecordsCount"
                                    [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage">
                                </p-paginator>
                                <span class="total-records-count">
                                    共计：{{primengTableHelper.totalRecordsCount}}
                                </span>
                            </div>
                        </tab>
                    </tabset>
                </div>
            </div>
        </div>
    </div>
</div>
